<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>001Basic_scene</title>
    <link href="../CSS/normalize.min.css"  rel="stylesheet">
    <link href="../CSS/slideout.css"  rel="stylesheet">
    <link href="../CSS/github.css"  rel="stylesheet">
    <link href="../CSS/github.css"  rel="stylesheet">
    <link href="../CSS/font-awesome.min.css"  rel="stylesheet">
    <link href="../CSS/perfect-scrollbar.min.css"  rel="stylesheet">
    <link href="../CSS/main.css"  rel="stylesheet">
</head>
<body>
<!--@@下面是翻译正文@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->

<nav class=" slideout-menu" id="menu"><div class="searchbar-mobile searchbar"><form action="/search" method="get"><input name="q" type="text" placeholder="Search..."><button type="submit"><i class="fa fa-search"></i></button></form></div><a style="cursor: help;" href="/"><i class="fa fa-home"></i>Home</a><a style="cursor: help;" href="/whats-new"><i class="fa fa-file-text-o"></i>What's new?</a><a style="cursor: help;" href="/generals"><i class="fa fa-book"></i>Generals</a><a style="cursor: help;" href="/tutorials"><i class="fa fa-cogs"></i>Tutorials</a><a style="cursor: help;" href="/overviews"><i class="fa fa-book"></i>Overviews</a><a style="cursor: help;" href="/exporters"><i class="fa fa-rocket"></i>Exporters</a><a style="cursor: help;" href="/extensions"><i class="fa fa-wrench"></i>Extensions</a><a style="cursor: help;" href="/classes"><i class="fa fa-files-o"></i>Classes</a><a style="cursor: help;" href="/playground"><i class="fa fa-cubes"></i>Playground</a><a style="cursor: help;" href="http://www.babylonjs.com" target="_blank"><i class="fa fa-play"></i>babylonjs.com</a><a style="cursor: help;" href="https://github.com/BabylonJS/Babylon.js" target="_blank"><i class="fa fa-github"></i>Github</a><a style="cursor: help;" href="https://github.com/BabylonJS/Documentation" target="_blank"><i class="fa fa-code-fork"></i>Contribute</a><a style="cursor: help;" href="http://www.html5gamedevs.com/forum/16-babylonjs" target="_blank"><i class="fa fa-html5"></i>Forum</a></nav>
<nav class="nav-main"><!-- Hamburger menu : displayed only in small screens--><i class="fa fa-bars" id="mobilemenu"></i><!-- this button only shows on mobile version of a "class" page--><div class="banner"><div class="menu"><div class="do-not-hover" id="home"><a style="cursor: help;" href="/">Babylon.js | DOCUMENTATION</a></div><div class="item" id="whatsnew"><a style="cursor: help;" href="/whats-new">What's new</a></div><div class="item" id="general"><a style="border-image: none; cursor: help;" href="/generals">General</a></div><div class="item active" id="tutorials"><a style="cursor: help;" href="/tutorials">教程</a></div><div class="item" id="overview"><a style="cursor: help;" href="/overviews">Overviews</a></div><div class="item" id="exporters"><a style="border-image: none; cursor: help;" href="/exporters">Exporters</a></div><div class="item" id="extensions"><a style="border-image: none; cursor: help;" href="/extensions">Extensions</a></div><div class="item" id="classes"><a style="border-image: none; cursor: help;" href="/classes">Classes</a></div><div class="item" id="playground"><a style="border-image: none; cursor: help;" href="/playground">Playground</a></div></div><div class="more"><div class="searchbar"><form action="/search" method="get"><input name="q" type="text" placeholder="Search..."><button type="submit"><i class="fa fa-search"></i></button></form></div></div></div></nav>
<div class=" slideout-panel" id="wrapper"><div class="statics-banner"><h1 style="border-image: none; cursor: help;">教程</h1></div><div class="horizontal-separator"></div>
<div class="static-content"><h1 style="border-image: none; cursor: help;">建立一个基本场景</h1><br><div class="contentTable"><div class="tocHeader"><span class="tocTitle" style="border-image: none; cursor: help;"><i class="tocIcon fa fa-book"></i>内容列表</span><span class="tocToggle"><i class="fa fa-arrow-up"></i></span></div><div class="tocContent"><ul>
    <li><a style="border-image: none; cursor: help;" href="#in-this-tutorial-we-are-going-to-create-a-basic-3d-scene-with-babylonjs">在这个教程中，我们将使用Babylon.js建立一个基本3D场景</a></li>
    <li><a style="border-image: none; cursor: help;" href="#the-html-part">HTML文档部分</a></li>
    <li><a style="border-image: none; cursor: help;" href="#the-css-style-part">CSS样式表部分</a></li>
    <li><a style="border-image: none; cursor: help;" href="#the-javascript-external-includes-part-the-framework">JavaScript外部引用部分（框架）</a><ul>
        <li><a style="border-image: none; cursor: help;" href="#got-troubles">遇到问题？</a></li>
        <li><a style="border-image: none; cursor: help;" href="#moving-on">进一步动手来做</a></li>
        <li><a style="border-image: none; cursor: help;" href="#next-step">下一步的教程</a></li>
    </ul>
    </li>
</ul>
</div></div><div id="staticContent"><h3 style="border-image: none; cursor: help;"><a name="in-this-tutorial-we-are-going-to-create-a-basic-3d-scene-with-babylonjs" class="anchor" href="#in-this-tutorial-we-are-going-to-create-a-basic-3d-scene-with-babylonjs"></a>在这个教程中，我们将使用Babylon.js建立一个基本3D场景</h3><p>
    <img alt="Babylon JS 01" src="../IMAGE/tut01pic01.jpg"></p>
<p><em style="border-image: none; cursor: help;">在这个基本场景中有两个基本形状</em></p>
<p style="border-image: none; cursor: help;">在你开始之前，请确定你有一个支持WebGL的浏览器(比如Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+, 等等.).</p>
<h3 style="border-image: none; cursor: help;"><a name="the-html-part" class="anchor" href="#the-html-part"></a>HTML文档部分</h3><p style="border-image: none; cursor: help;">第一步，建立一个基本的HTML5网页</p>
<pre><code class="lang-html hljs xml" style="border-image: none; cursor: help;"><span class="hljs-doctype" style="border-image: none; cursor: help;">&lt;!DOCTYPE html&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">html</span> <span class="hljs-attribute" style="border-image: none; cursor: help;">xmlns</span>=<span class="hljs-value" style="border-image: none; cursor: help;">"http://www.w3.org/1999/xhtml"</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">meta</span> <span class="hljs-attribute" style="border-image: none; cursor: help;">http-equiv</span>=<span class="hljs-value" style="border-image: none; cursor: help;">"Content-Type"</span> <span class="hljs-attribute" style="cursor: help;">content</span>=<span class="hljs-value" style="cursor: help;">"text/html; charset=utf-8"</span>/&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">title</span>&gt;</span>Babylon - Basic scene<span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">title</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">head</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">body</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">body</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">html</span>&gt;</span>
</code></pre>
<h3 style="border-image: none; cursor: help;"><a name="the-css-style-part" class="anchor" href="#the-css-style-part"></a>CSS样式表部分</h3><p style="border-image: none; cursor: help;">在<code style="border-image: none; cursor: help;">&lt;head&gt;</code>标签中, 请加入这一段CSS以保证canvas标签保持最大化</p>
<pre><code class="lang-css hljs">&lt;<span class="hljs-tag" style="cursor: help;">style</span>&gt;
    <span class="hljs-tag" style="cursor: help;">html</span>, <span class="hljs-tag" style="cursor: help;">body</span> <span class="hljs-rules" style="border-image: none; cursor: help;">{
    <span class="hljs-rule"><span class="hljs-attribute" style="border-image: none; cursor: help;">overflow</span>:<span class="hljs-value" style="cursor: help;"> hidden</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute" style="border-image: none; cursor: help;">width</span>:<span class="hljs-value"> <span class="hljs-number" style="border-image: none; cursor: help;">100%</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute" style="border-image: none; cursor: help;">height</span>:<span class="hljs-value"> <span class="hljs-number" style="border-image: none; cursor: help;">100%</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute" style="border-image: none; cursor: help;">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute" style="border-image: none; cursor: help;">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
  }</span>

    <span class="hljs-id" style="border-image: none; cursor: help;">#renderCanvas</span> <span class="hljs-rules" style="border-image: none; cursor: help;">{
    <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">width</span>:<span class="hljs-value"> <span class="hljs-number" style="cursor: help;">100%</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">height</span>:<span class="hljs-value"> <span class="hljs-number" style="cursor: help;">100%</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">touch-action</span>:<span class="hljs-value" style="cursor: help;"> none</span></span>;
  }</span>
    &lt;/<span class="hljs-tag" style="cursor: help;">style</span>&gt;
</code></pre>
<h3 style="border-image: none; cursor: help;"><a name="the-javascript-external-includes-part-the-framework" class="anchor" href="#the-javascript-external-includes-part-the-framework"></a>JavaScript外部引用部分（框架）</h3><p style="border-image: none; cursor: help;">现在我们加载框架文件。在CSS的后面，（但是仍然在<code style="cursor: help;">&lt;head&gt;</code>标签里），请加入以下内容：</p>
<pre><code class="lang-html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-title" style="border-image: none; cursor: help;">script</span> <span class="hljs-attribute" style="border-image: none; cursor: help;">src</span>=<span class="hljs-value" style="border-image: none; cursor: help;">"babylon.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title" style="border-image: none; cursor: help;">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="border-image: none; cursor: help;">script</span> <span class="hljs-attribute" style="border-image: none; cursor: help;">src</span>=<span class="hljs-value" style="border-image: none; cursor: help;">"hand.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="border-image: none; cursor: help;">script</span> <span class="hljs-attribute" style="border-image: none; cursor: help;">src</span>=<span class="hljs-value" style="border-image: none; cursor: help;">"cannon.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">script</span>&gt;</span>  <span class="hljs-comment" style="border-image: none; cursor: help;">&lt;!-- optional physics engine --&gt;</span>
    <span class="hljs-comment" style="border-image: none; cursor: help;">&lt;!-- &lt;script src="Oimo.js"&gt;&lt;/script&gt;  New physics engine --&gt;</span>
</code></pre>
<p style="border-image: none; cursor: help;">（如果你现在没有这些文件，你可以在这里找到它们：<a style="border-image: none; cursor: help;" href="https://github.com/BabylonJS/Babylon.js">https://github.com/BabylonJS/Babylon.js</a>，还有这里：<a style="border-image: none; cursor: help;" href="http://handjs.codeplex.com/">http://handjs.codeplex.com/</a>)</p>
<p style="border-image: none; cursor: help;">接下来，我们进入网页的<code style="border-image: none; cursor: help;">&lt;body&gt;</code>部分。我们加入了一个HTML5 canvas标签，后面我们将在这个标签内绘制3D场景。</p>
<pre><code class="lang-html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-title" style="border-image: none; cursor: help;">canvas</span> <span class="hljs-attribute">id</span>=<span class="hljs-value" style="border-image: none; cursor: help;">"renderCanvas"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title" style="border-image: none; cursor: help;">canvas</span>&gt;</span>
</code></pre>
<p style="border-image: none; cursor: help;">现在，我们从HTML5标签的书写跳转到JavaScript脚本书写。请在<code style="border-image: none; cursor: help;">&lt;body&gt;</code> 部分中加入：</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">&lt;script&gt;

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 从上面的HTML中取得canvas元素</span>
    <span class="hljs-keyword" style="border-image: none; cursor: help;">var</span> canvas = <span class="hljs-built_in" style="border-image: none; cursor: help;">document</span>.getElementById(<span class="hljs-string" style="border-image: none; cursor: help;">"renderCanvas"</span>);

    <span class="hljs-comment" style="border-image: none; cursor: help;">//加载BABYLON 3D 引擎</span>
    <span class="hljs-keyword" style="border-image: none; cursor: help;">var</span> engine = <span class="hljs-keyword" style="border-image: none; cursor: help;">new</span> BABYLON.Engine(canvas, <span class="hljs-literal" style="border-image: none; cursor: help;">true</span>);
</code></pre>
<p style="border-image: none; cursor: help;">现在，你将开始添加场景创建代码。为了保证你的代码可以适应Babylon.js Playground，我们建议你在这里插入一个‘createScene’方法，除了生成一个Babylon场景对象之外，createScene()也是你添加你的基本场景设定的地方，包括：一个相机，一个光源，还有一个或多个形状/网格。</p>
<p style="border-image: none; cursor: help;">所以现在请将整个 createScene 方法加入到你的网页中:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">  <span class="hljs-comment" style="border-image: none; cursor: help;">// 这相当于一个构造函数，在场景对象建立时将会执行。</span>
    <span class="hljs-keyword" style="border-image: none; cursor: help;">var</span> createScene = <span class="hljs-function"><span class="hljs-keyword" style="border-image: none; cursor: help;">function</span> (<span class="hljs-params"></span>) </span>{

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 建立基本场景</span>
    <span class="hljs-keyword" style="border-image: none; cursor: help;">var</span> scene = <span class="hljs-keyword" style="border-image: none; cursor: help;">new</span> BABYLON.Scene(engine);

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 将场景的背景色改为绿色</span>
    scene.clearColor = <span class="hljs-keyword" style="border-image: none; cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>);

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 创建并放置一个自由相机</span>
    <span class="hljs-keyword" style="cursor: help;">var</span> camera = <span class="hljs-keyword" style="border-image: none; cursor: help;">new</span> BABYLON.FreeCamera(<span class="hljs-string" style="border-image: none; cursor: help;">"camera1"</span>, <span class="hljs-keyword" style="border-image: none; cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, <span class="hljs-number">5</span>, -<span class="hljs-number">10</span>), scene);

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 将相机的目标指向场景的原点</span>
    camera.setTarget(BABYLON.Vector3.Zero());

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 为相机添加一个基于canvas的控制器</span>
    camera.attachControl(canvas, <span class="hljs-literal" style="border-image: none; cursor: help;">false</span>);

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 建立一个光源，指向0,1,0方向——竖直朝上。</span>
    <span class="hljs-keyword" style="cursor: help;">var</span> light = <span class="hljs-keyword" style="border-image: none; cursor: help;">new</span> BABYLON.HemisphericLight(<span class="hljs-string" style="border-image: none; cursor: help;">"light1"</span>, <span class="hljs-keyword" style="border-image: none; cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>), scene);

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 令光源变得稍微昏暗</span>
    light.intensity = .<span class="hljs-number">5</span>;

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 让我们尝试Babylon.js内建的‘球’形状。参数：名字，弧面细分度，直径，所属场景</span>
    <span class="hljs-keyword" style="cursor: help;">var</span> sphere = BABYLON.Mesh.CreateSphere(<span class="hljs-string" style="border-image: none; cursor: help;">"sphere1"</span>, <span class="hljs-number">16</span>, <span class="hljs-number">2</span>, scene);

    <span class="hljs-comment" style="border-image: none; cursor: help;">//将球体上移它直径的一半（球体默认绘制在原点，上移后原点在球体的正下表面处）</span>
    sphere.position.y = <span class="hljs-number">1</span>;

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 尝试Babylon.js内建的‘地面’形状。参数：名字，宽度，深度，细分度，所属场景。</span>
    <span class="hljs-keyword" style="cursor: help;">var</span> ground = BABYLON.Mesh.CreateGround(<span class="hljs-string" style="border-image: none; cursor: help;">"ground1"</span>, <span class="hljs-number">6</span>, <span class="hljs-number">6</span>, <span class="hljs-number">2</span>, scene);

    <span class="hljs-comment" style="border-image: none; cursor: help;">// 将生成的场景对象返回</span>
    <span class="hljs-keyword" style="cursor: help;">return</span> scene;

    };  <span class="hljs-comment" style="border-image: none; cursor: help;">// 结束createScene方法</span>
</code></pre>
<p style="border-image: none; cursor: help;">好的，这将是一个很复杂的函数，但是不要让它吓退你。你将在未来的教程中学到更多关于光照、相机、内建图形等对象的参数和属性的知识。你要记住的重点是这个createScene方法包含了所有的全局设定。它包括：</p>
<ul>
    <li style="border-image: none; cursor: help;">一个Babylon场景对象</li>
    <li style="border-image: none; cursor: help;">一个被赋予了控制器的相机</li>
    <li style="border-image: none; cursor: help;">一个具有指向性的光源</li>
    <li style="border-image: none; cursor: help;">一个被放在0,1,0的球体</li>
    <li style="border-image: none; cursor: help;">一个被放在0,0,0的平面（默认位置）</li>
</ul>
<p style="border-image: none; cursor: help;">还有三块额外的代码要加入到你的网页中。首先是对我们刚刚完成的createScene方法的调用。添加如下内容：</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">  <span class="hljs-comment" style="border-image: none; cursor: help;">// 现在，调用你刚刚编写完成的createScene函数</span>
    <span class="hljs-keyword" style="border-image: none; cursor: help;">var</span> scene = createScene();
</code></pre>
<p style="border-image: none; cursor: help;">第二步，建立核心渲染循环，来重复的刷新场景（在C++时代这里是自己写的for语句，在原生WebGl中是requestAnimFrame，在Babylon中作者进行了进一步封装）</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">  <span class="hljs-comment" style="border-image: none; cursor: help;">// 注册一个渲染循环来重复渲染场景</span>
    engine.runRenderLoop(<span class="hljs-function"><span class="hljs-keyword" style="border-image: none; cursor: help;">function</span> (<span class="hljs-params"></span>) </span>{
    scene.render();
    });
</code></pre>
<p style="border-image: none; cursor: help;">最后，一个可选但好用的窗口大小变化处理方法。</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">  <span class="hljs-comment" style="border-image: none; cursor: help;">// 监听浏览器或canvas标签的尺寸改变事件</span>
    <span class="hljs-built_in" style="border-image: none; cursor: help;">window</span>.addEventListener(<span class="hljs-string" style="border-image: none; cursor: help;">"resize"</span>, <span class="hljs-function"><span class="hljs-keyword" style="border-image: none; cursor: help;">function</span> (<span class="hljs-params"></span>) </span>{
    engine.resize();
    });
</code></pre>
<p style="border-image: none; cursor: help;">现在，所有的JavaScript脚本编写已经完成，确保你关闭了script、body、html标签。</p>
<pre><code class="lang-html hljs xml"><span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">script</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">body</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">html</span>&gt;</span>
</code></pre>
<p style="border-image: none; cursor: help;">你成功了！将这个html文件和babylon.js、hand.js、cannon. js
    保存在同一个文件夹中，然后用你支持WebGL的浏览器来访问。你将看到canvas中显示的3D场景</p>
<p style="border-image: none; cursor: help;">一个使用Babylon.js Playground展示的类似场景可以在<a href="http://www.babylonjs.com/playground/#1GM4YQ"><strong style="border-image: none; cursor: help;">这里</strong></a>看到。你将可以在线的查看整个场景，如果感兴趣的话可以使用'Get .zip' 功能来下载整个index.html文件</p>
<h2 style="border-image: none; cursor: help;"><a name="got-troubles" class="anchor" href="#got-troubles"></a>遇到问题了?</h2><p style="border-image: none; cursor: help;">这里是整个网页:</p>
<pre><code class="lang-html hljs xml" style="border-image: none; cursor: help;"><span class="hljs-doctype" style="border-image: none; cursor: help;">&lt;!doctype html&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">html</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="border-image: none; cursor: help;">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">meta</span> <span class="hljs-attribute" style="cursor: help;">charset</span>=<span class="hljs-value" style="border-image: none; cursor: help;">"utf-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">title</span>&gt;</span>Babylon - Basic scene<span class="hljs-tag">&lt;/<span class="hljs-title" style="border-image: none; cursor: help;">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">style</span>&gt;</span><span class="css">
      <span class="hljs-tag" style="cursor: help;">html</span>, <span class="hljs-tag" style="cursor: help;">body</span> <span class="hljs-rules" style="border-image: none; cursor: help;">{
         <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">overflow</span>:<span class="hljs-value" style="border-image: none; cursor: help;"> hidden</span></span>;
         <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">width</span>:<span class="hljs-value"> <span class="hljs-number" style="cursor: help;">100%</span></span></span>;
         <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">height</span>:<span class="hljs-value"> <span class="hljs-number" style="cursor: help;">100%</span></span></span>;
         <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
         <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
      }</span>
      <span class="hljs-id" style="cursor: help;">#renderCanvas</span> <span class="hljs-rules" style="cursor: help;">{
         <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">width</span>:<span class="hljs-value"> <span class="hljs-number" style="cursor: help;">100%</span></span></span>;
         <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">height</span>:<span class="hljs-value"> <span class="hljs-number" style="cursor: help;">100%</span></span></span>;
         <span class="hljs-rule"><span class="hljs-attribute" style="cursor: help;">touch-action</span>:<span class="hljs-value" style="cursor: help;"> none</span></span>;
      }</span>
   </span><span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">style</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">script</span> <span class="hljs-attribute" style="cursor: help;">src</span>=<span class="hljs-value" style="cursor: help;">"babylon.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">script</span> <span class="hljs-attribute" style="cursor: help;">src</span>=<span class="hljs-value" style="cursor: help;">"hand.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">script</span> <span class="hljs-attribute" style="cursor: help;">src</span>=<span class="hljs-value" style="cursor: help;">"cannon.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">script</span>&gt;</span> <span class="hljs-comment" style="cursor: help;">&lt;!-- optional physics engine --&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">canvas</span> <span class="hljs-attribute">id</span>=<span class="hljs-value" style="cursor: help;">"renderCanvas"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">canvas</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title" style="cursor: help;">script</span> <span class="hljs-attribute" style="cursor: help;">type</span>=<span class="hljs-value" style="cursor: help;">"text/javascript"</span>&gt;</span><span class="javascript" style="border-image: none; cursor: help;">
      <span class="hljs-comment" style="cursor: help;">// Get the canvas element from our HTML below</span>
      <span class="hljs-keyword" style="cursor: help;">var</span> canvas = <span class="hljs-built_in" style="cursor: help;">document</span>.querySelector(<span class="hljs-string" style="cursor: help;">"#renderCanvas"</span>);
      <span class="hljs-comment" style="cursor: help;">// Load the BABYLON 3D engine</span>
      <span class="hljs-keyword" style="cursor: help;">var</span> engine = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Engine(canvas, <span class="hljs-literal" style="cursor: help;">true</span>);
      <span class="hljs-comment" style="cursor: help;">// -------------------------------------------------------------</span>
      <span class="hljs-comment" style="cursor: help;">// Here begins a function that we will 'call' just after it's built</span>
      <span class="hljs-keyword" style="cursor: help;">var</span> createScene = <span class="hljs-function"><span class="hljs-keyword" style="cursor: help;">function</span> (<span class="hljs-params"></span>) </span>{
         <span class="hljs-comment" style="cursor: help;">// Now create a basic Babylon Scene object</span>
         <span class="hljs-keyword" style="cursor: help;">var</span> scene = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Scene(engine);
         <span class="hljs-comment" style="cursor: help;">// Change the scene background color to green.</span>
         scene.clearColor = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>);
         <span class="hljs-comment" style="cursor: help;">// This creates and positions a free camera</span>
         <span class="hljs-keyword" style="cursor: help;">var</span> camera = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.FreeCamera(<span class="hljs-string" style="cursor: help;">"camera1"</span>, <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, <span class="hljs-number">5</span>, -<span class="hljs-number">10</span>), scene);
         <span class="hljs-comment" style="border-image: none; cursor: help;">// This targets the camera to scene origin</span>
         camera.setTarget(BABYLON.Vector3.Zero());
         <span class="hljs-comment" style="cursor: help;">// This attaches the camera to the canvas</span>
         camera.attachControl(canvas, <span class="hljs-literal" style="cursor: help;">false</span>);
         <span class="hljs-comment" style="cursor: help;">// This creates a light, aiming 0,1,0 - to the sky.</span>
         <span class="hljs-keyword" style="cursor: help;">var</span> light = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.HemisphericLight(<span class="hljs-string" style="cursor: help;">"light1"</span>, <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>), scene);
         <span class="hljs-comment" style="cursor: help;">// Dim the light a small amount</span>
         light.intensity = .<span class="hljs-number">5</span>;
         <span class="hljs-comment" style="cursor: help;">// Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene</span>
         <span class="hljs-keyword" style="cursor: help;">var</span> sphere = BABYLON.Mesh.CreateSphere(<span class="hljs-string" style="cursor: help;">"sphere1"</span>, <span class="hljs-number">16</span>, <span class="hljs-number">2</span>, scene);
         <span class="hljs-comment" style="cursor: help;">// Move the sphere upward 1/2 its height</span>
         sphere.position.y = <span class="hljs-number">1</span>;
         <span class="hljs-comment" style="cursor: help;">// Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene</span>
         <span class="hljs-keyword" style="cursor: help;">var</span> ground = BABYLON.Mesh.CreateGround(<span class="hljs-string" style="cursor: help;">"ground1"</span>, <span class="hljs-number">6</span>, <span class="hljs-number">6</span>, <span class="hljs-number">2</span>, scene);
         <span class="hljs-comment" style="cursor: help;">// Leave this function</span>
         <span class="hljs-keyword" style="cursor: help;">return</span> scene;
      }; <span class="hljs-comment" style="cursor: help;">// End of createScene function</span>
      <span class="hljs-comment" style="border-image: none; cursor: help;">// -------------------------------------------------------------</span>
      <span class="hljs-comment" style="border-image: none; cursor: help;">// Now, call the createScene function that you just finished creating</span>
      <span class="hljs-keyword" style="cursor: help;">var</span> scene = createScene();
      <span class="hljs-comment" style="border-image: none; cursor: help;">// Register a render loop to repeatedly render the scene</span>
      engine.runRenderLoop(<span class="hljs-function"><span class="hljs-keyword" style="cursor: help;">function</span> (<span class="hljs-params"></span>) </span>{
         scene.render();
      });
      <span class="hljs-comment" style="border-image: none; cursor: help;">// Watch for browser/canvas resize events</span>
      <span class="hljs-built_in" style="cursor: help;">window</span>.addEventListener(<span class="hljs-string" style="cursor: help;">"resize"</span>, <span class="hljs-function"><span class="hljs-keyword" style="border-image: none; cursor: help;">function</span> (<span class="hljs-params"></span>) </span>{
         engine.resize();
      });
   </span><span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">script</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title" style="cursor: help;">body</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title" style="border-image: none; cursor: help;">html</span>&gt;</span>
</code></pre>
<h2 style="border-image: none; cursor: help;"><a name="moving-on" class="anchor" href="#moving-on"></a>进一步动手来做</h2><p style="border-image: none; cursor: help;">在前面的基础教程中，我主要在向你讲述如何将createScene方法插入一个Babylon.js项目中（虚线之间的部分）。在下面的教程中我将假定你已经掌握了这一知识。</p>
<p style="border-image: none; cursor: help;">请试着记住这个网页布局，并且理解createScene方法的重要意义。在你使用Babylon.js Playground一段时间后，你将发现createScene()是很灵活的，它可以被方便的在编辑器里复制粘贴。这将方便其他人帮助你解决问题，也将方便你帮助他人。</p>
<h2 style="border-image: none; cursor: help;"><a name="next-step" class="anchor" href="#next-step"></a>下一步</h2><hr>
<p style="border-image: none; cursor: help;">现在你已经准备好继续前进并学习如何建立更多的图形元素，比如球体、圆柱体、立方体等等。</p>
<p style="border-image: none; cursor: help;">下一个教程<a href="http://doc.babylonjs.com/tutorials/Discover_Basic_Elements"><strong style="border-image: none; cursor: help;">Basic elements</strong></a></p>
</div></div>
</div>

<!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->

<footer class="footer"><div class="footer-item"><a style="border-image: none; cursor: help;" href="http://www.html5gamedevs.com/forum/16-babylonjs" target="_blank"><i class="fa fa-html5"></i>    Forum</a></div><div class="footer-item"><a style="border-image: none; cursor: help;" href="https://github.com/BabylonJS/Babylon.js" target="_blank"><i class="fa fa-github"></i>    Github</a></div><div class="footer-item"><a style="border-image: none; cursor: help;" href="https://github.com/BabylonJS/Documentation" target="_blank"><i class="fa fa-code-fork"></i>    Contribute</a></div></footer>
<div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;"><div id="trans-tooltip"><div id="tip-left-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png);"></div><div id="tip-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png) repeat-x;"></div><div id="tip-right-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png);"></div><div id="tip-right" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png) repeat-y;"></div><div id="tip-right-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png);"></div><div id="tip-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png) repeat-x;"></div><div id="tip-left-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png);"></div><div id="tip-left" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png);"></div><div id="trans-content"></div></div><div id="tip-arrow-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png);"></div><div id="tip-arrow-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png);"></div></div>

<!--@@下面是工具脚本@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->

<div id="div_hidden" style="display: none">
    <div id="div_mod1">
        <div class="div_inmod1" style="width: 100%;height: 100%;margin: 0px;border: 1px solid;padding: 0px;float: left;line-height: 20px" >
            <button onclick="ExportHtml()" style="margin-left: auto;margin-right: auto;float: left;position: relative;left: 10px">导出网页</button>
        </div>
    </div>
    <div id="div_mod2">
        <div class="div_inmod2" style="width: 100%;height: 100%;margin: 0px;border: 1px solid;padding: 0px;float: left;line-height: 20px">
            <div class="div_inmod_head" style="width: 100%;height: 20px;background-color: #E0ECFF;margin:0;border: 0;padding:0;border-bottom: 1px solid">
                <BUTTON title="点击关闭对话框" style='float:right;aposition:static; width: 14px;height: 14px; margin: 0;margin-top: 2px;margin-right:2px;padding: 0;background: url("") no-repeat;border: 0px;vertical-align:top' onclick="DeleteWindow();" type=submit></BUTTON>
                <BUTTON title="点击确定修改" style='float:right;aposition:static; width: 14px;height: 14px; margin: 0;margin-top: 2px;margin-right:2px;padding: 0;background: url("") no-repeat;border: 0px;vertical-align:top' onclick="ChangeValue();DeleteWindow();" type=submit></BUTTON>
                <BUTTON title="点击恢复上一历史状态" style='float:right;aposition:static; width: 14px;height: 14px; margin: 0;margin-top: 2px;margin-right:2px;padding: 0;background: url("") no-repeat;border: 0px;vertical-align:top' onclick="ReloadValue();DeleteWindow();" type=submit></BUTTON>
            </div>
            <textarea class="div_inmod2_content" style="width: 100%;height: 98px;overflow-x: hidden;margin:0;border: 0;padding:0" onchange=""></textarea>
        </div>
    </div>
</div>
<script src="../JS/MYLIB/MIN/Events.min.js"></script>
<script src="../JS/MYLIB/MIN/FileText.min.js"></script>
<script src="../JS/MYLIB/MIN/View.min.js"></script>
<script>
    var bbl_current_obj;
    var bbl_style_temp;
    var bbl_int_count2=0;
    var bbl_arr_history=[];
    window.onload=function()
    {
        delete_div("div_ExportHtml");
        Open_div("","div_ExportHtml",100,80,0,0);
        if(true)
            return;
        var div_ExportHtml=document.getElementById("div_ExportHtml");
        div_ExportHtml.innerHTML=document.getElementById("div_mod1").innerHTML;
        div_ExportHtml.style.position="fixed";
        div_ExportHtml.style.right="0px";
        div_ExportHtml.style.top="300px";
        //div_ExportHtml.style.float="right";
        var int_count=0;//为每一个可调整标签设置不同的tid属性
        var arr_tags=["p","a","span","h1","h2","h3","h4","h5","li","td","th","code","strong","em"];
        var leng=arr_tags.length;
        for(var i=0;i<leng;i++)//对于每一种标签
        {
            var objs=document.getElementsByTagName(arr_tags[i]);
            var leng2=objs.length;
            for(var j=0;j<leng2;j++)//对于每一个标签
            {
                var children=objs[j].childNodes;
                var leng3=children.length;
                for(var k=0;k<leng3;k++)//寻找文本节点
                {
                    if(children[k].nodeName=="#text"&&children[k].textContent.Trim().length>2)
                    {
                        objs[j].tid="tid"+int_count;
                        objs[j].style.cursor="help";
                        objs[j].onmouseover=function()
                        {
                            bbl_style_temp=this.style.border;
                            this.style.border="2px solid rgb(59, 203, 249)";
                            bbl_current_obj=objs[j];
                        }
                        objs[j].onmouseout=function()
                        {
                            this.style.border=bbl_style_temp;
                        }
                        objs[j].onclick=function(){
                            var evt=evt||window.event;
                            cancelEvent(evt);
                            cancelPropagation(evt);
                            //alert(this.textContent);
                            var arr_child=this.childNodes;
                            var leng4=arr_child.length;
                            //首先删除所有已经存在的对话框
                            for(var l=0;l<bbl_int_count2;l++)
                            {
                                delete_div("div_inmod2_"+l);
                            }
                            bbl_int_count2=0;
                            for(var l=0;l<leng4;l++)//对于其中的每一个文本节点，弹出修改对话框
                            {
                                if(arr_child[l].nodeName=="#text"&&arr_child[l].textContent.Trim().length>2)
                                {
                                    Open_div(this,"div_inmod2_"+bbl_int_count2,240,120,0+bbl_int_count2*250,0);
                                    var div_inmod2=document.getElementById("div_inmod2_"+bbl_int_count2);//取出新添加的元素
                                    div_inmod2.ttid=this.getAttribute("tid")?this.getAttribute("tid"):this.tid;//把被选择标签的全局标记交给弹出框
                                    div_inmod2.tobj=this;
                                    div_inmod2.textnum=l;//在文本框中记录，这个文本框对应的是标签的第几个子节点
                                    div_inmod2.innerHTML=document.getElementById("div_mod2").innerHTML;
                                    con_getElementsByClassName("div_inmod2_content",div_inmod2)[0].innerHTML=arr_child[l].textContent;//填入原有值，考虑标签嵌套问题//#text型标签没有innerhtml属性！！
                                    bbl_int_count2++;//记下有多少个，后面删除所有对话框时使用
                                }
                            }
                        }
                        break;
                    }
                }
            }
        }
    }
    function DeleteWindow()
    {//只删除掉点击关闭的这一个标签
        var evt=evt||window.event;
        cancelPropagation(evt);
        var obj=evt.currentTarget?evt.currentTarget:evt.srcElement;
        var str_id=obj.parentNode.parentNode.parentNode.id;
        delete_div(str_id);
    }
    //写入修改后的标签值，并写入日志
    function ChangeValue()
    {
        var evt=evt||window.event;
        cancelPropagation(evt);
        var obj=evt.currentTarget?evt.currentTarget:evt.srcElement;
        //document.getElementsByTagName()
        var div_inmod2=obj.parentNode.parentNode.parentNode;
        var obj_text=obj.parentNode.parentNode.getElementsByTagName("textarea")[0];//输入的文本框
        if(obj_text.innerHTML.trim().length<1)
        {
            alert("修改后的文本过短");
        }
        else {
            var tobj = div_inmod2.getAttribute("tobj") ? div_inmod2.getAttribute("tobj") : div_inmod2.tobj;//取得该输入框对应的标签
            var ttid = div_inmod2.getAttribute("tid") ? div_inmod2.getAttribute("tid") : div_inmod2.tid;//
            var textnum = div_inmod2.getAttribute("textnum") ? div_inmod2.getAttribute("textnum") : div_inmod2.textnum;
            //写日志
            var arr_temp = [];
            arr_temp.push(ttid + "&" + textnum);
            arr_temp.push(tobj.childNodes[textnum].textContent);
            bbl_arr_history.push(arr_temp);
            //改值
            tobj.childNodes[textnum].textContent = obj_text.innerHTML;
        }
    }
    //根据日志恢复标签内容
    function ReloadValue()
    {
        var evt=evt||window.event;
        cancelPropagation(evt);
        var obj=evt.currentTarget?evt.currentTarget:evt.srcElement;
        var div_inmod2=obj.parentNode.parentNode.parentNode;
        var tobj=div_inmod2.getAttribute("tobj")?div_inmod2.getAttribute("tobj"):div_inmod2.tobj;//取得该输入框对应的标签
        var ttid=div_inmod2.getAttribute("tid")?div_inmod2.getAttribute("tid"):div_inmod2.tid;//
        var textnum=div_inmod2.getAttribute("textnum")?div_inmod2.getAttribute("textnum"):div_inmod2.textnum;


        var flag=0;//0表示没有找到，对应的日志记录
        var leng=bbl_arr_history.length;
        for(var i=leng-1;i>=0;i--)
        {
            var str=ttid+"&"+textnum;
            if(bbl_arr_history[i][0]==str)//找到新的这一条
            {
                tobj.childNodes[textnum].textContent=bbl_arr_history[i][1];
                bbl_arr_history.splice(i,1);//将日志里的这一条删除
                flag=1;
                break;
            }
        }
        if(flag==0)
        {
            alert("没有日志记录！");
        }
    }
    //以html格式导出网页
    function ExportHtml()
    {
        DownloadText(MakeDateStr()+document.title,("<!DOCTYPE html><html>"+document.getElementsByTagName("html")[0].innerHTML+"</html>"));
    }
</script>
</body>
</html>